<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:composite="http://java.sun.com/jsf/composite"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:zanata="http://java.sun.com/jsf/composite/zanata">

<composite:interface>
  <composite:attribute name="maxlength" type="java.lang.Integer" default="100"
    shortDescription="The maximum number of characters that may
                be entered in this field."/>

  <composite:attribute name="minlength" type="java.lang.Integer"
    shortDescription="Minimal number of chars in input to activate suggestion popup"
    default="2"/>

  <composite:attribute name="actionBean" required="true"
    type="org.zanata.ui.AbstractAutocomplete"/>

  <composite:attribute name="searchWhenFocus" type="java.lang.Boolean"
    shortDescription="Start search when input field is focus. If 'true', minlength is ignore when input field focus."
    default="false"/>

  <composite:attribute name="id" type="java.lang.String"
    shortDescription="id of component. Must be a valid JavaScript identifier." required="true"/>

  <composite:attribute name="fetchValue" required="true" type="java.lang.String"
    shortDescription="A value to use when submit to server using onselectItem action"/>

  <composite:attribute name="placeholder" type="java.lang.String"
    shortDescription="placeholder text for input field" default=""/>

  <composite:attribute name="activePlaceholder" type="java.lang.String"
    shortDescription="placeholder text for input filed when it is active" default=""/>

  <composite:attribute name="onSelectItem" default="null"
    shortDescription="The client-side script method to be called when an item has been click on enter (param - clicked jQuery(li))"/>

  <composite:attribute name="render"
    shortDescription="Ids of component to render after submit (actionBean.onSelectItemAction)"/>

  <composite:attribute name="oncomplete"
    shortDescription="The client-side script method to be called after the DOM is updated"/>

  <composite:attribute name="onRenderResultComplete"
    shortDescription="The client-side script method to be called after suggestions results"/>

  <composite:attribute name="inputClass"
    shortDescription="CSS class for input field"/>

  <composite:attribute name="onSelectStatus"
    shortDescription="Name of the a4j:status component to activate when selecting an item from the suggestion list"/>

  <composite:attribute name="displayText"
    shortDescription="Text to display in input field." default=""/>


</composite:interface>

<composite:implementation>

  <h:outputScript library="webjars" name="${webjars.JQueryTypingJS}" target="body"/>

  <a4j:jsFunction name="#{cc.attrs.id}RenderResult"
    render="#{cc.attrs.id}-result"
    limitRender="true"
    onbegin="#{cc.attrs.id}ShowLoader()"
    oncomplete="#{cc.attrs.id}HideLoader(); #{cc.attrs.onRenderResultComplete};
    registerMouseEvent('#{cc.attrs.id}', #{cc.attrs.id}SubmitSelected, #{cc.attrs.onSelectItem})">
    <a4j:param name="val" assignTo="#{cc.attrs.actionBean.query}"/>
  </a4j:jsFunction>

  <a4j:jsFunction name="#{cc.attrs.id}ClearResults"
    render="#{cc.attrs.id}-result"
    action="#{cc.attrs.actionBean.reset}"
    limitRender="true"
    onbegin="#{cc.attrs.id}ShowLoader()"
    oncomplete="#{cc.attrs.id}HideLoader(); registerMouseEvent('#{cc.attrs.id}', #{cc.attrs.id}SubmitSelected, #{cc.attrs.onSelectItem})">
  </a4j:jsFunction>

  <script type="text/javascript">
    function #{cc.attrs.id}ShowLoader() {
      var loaderId = '#' + '#{cc.attrs.id}-loader'
      jQuery(loaderId).removeClass('is-hidden')
    }

    function #{cc.attrs.id}HideLoader() {
      var loaderId = '#' + '#{cc.attrs.id}-loader'
      jQuery(loaderId).addClass('is-hidden')
    }

    jQuery(function() {
      var inputField = jQuery('#' + '#{cc.attrs.id}-autocomplete__input');
      inputField.typing({
        stop: function(event, elem) {
          onValueChange(elem, event, #{cc.attrs.id}RenderResult, #{cc.attrs.id}ClearResults);
        },
        delay: 400
      });

      inputField.bind('paste cut', function(event) {
        setTimeout(function () {
          onValueChange(inputField, event, #{cc.attrs.id}RenderResult, #{cc.attrs.id}ClearResults);
        }, 400);
      });
    });


    <ui:fragment rendered="#{not empty cc.attrs.activePlaceholder}">
      jQuery(function() {
        jQuery('#' + '#{cc.attrs.id}-autocomplete__input').on('focus', function() {
          $(this).attr('placeholder', '#{cc.attrs.activePlaceholder}');
        });
        jQuery('#' + '#{cc.attrs.id}-autocomplete__input').on('blur', function() {
          $(this).attr('placeholder', '#{cc.attrs.placeholder}');
        });
      });
    </ui:fragment>
  </script>

  <ui:fragment rendered="#{cc.attrs.onSelectItem == 'null'}">
    <a4j:jsFunction name="#{cc.attrs.id}SubmitSelected"
      action="#{cc.attrs.actionBean.onSelectItemAction()}"
      render="#{cc.attrs.render}"
      oncomplete="#{cc.attrs.oncomplete}"
      status="#{cc.attrs.onSelectStatus}">
      <a4j:param name="val" assignTo="#{cc.attrs.actionBean.selectedItem}"/>
    </a4j:jsFunction>
  </ui:fragment>

  <ui:fragment rendered="#{cc.attrs.onSelectItem != 'null'}">
    <a4j:jsFunction name="#{cc.attrs.id}SubmitSelected" limitRender="true">
      <a4j:param name="val" assignTo="#{cc.attrs.actionBean.selectedItem}"/>
    </a4j:jsFunction>
  </ui:fragment>

  <div class="autocomplete" id="#{cc.attrs.id}"
    onkeydown="onResultKeyPressed(this, event, #{cc.attrs.id}SubmitSelected, #{cc.attrs.onSelectItem})">

    <input type="text" maxlength="#{cc.attrs.maxlength}" autocomplete="off"
      class="js-autocomplete__input autocomplete__input js-tabs-nav-focus-input #{cc.attrs.inputClass}"
      onfocus="onInputFocus(this, #{cc.attrs.id}RenderResult)"
      id="#{cc.attrs.id}-autocomplete__input"
      placeholder="#{cc.attrs.placeholder}" />

    <input type="hidden" value="#{cc.attrs.minlength}"/>
    <input type="hidden" value="#{cc.attrs.searchWhenFocus}"/>
    <h:panelGroup layout="block"  id="#{cc.attrs.id}-result">
      <ui:param value="#{cc.attrs.actionBean.suggest()}" name="resultList"/>
      <div id="#{cc.attrs.id}-loader" class="is-hidden autocomplete__results">
        <zanata:loader/>
      </div>
      <ui:fragment rendered="#{not empty resultList}">
        <ul class="js-autocomplete__results autocomplete__results">
          <ui:repeat value="#{resultList}" var="result">
            <li class="js-autocomplete__result autocomplete__result">
              <h:inputHidden value="#{cc.attrs.fetchValue}"/>
              <composite:insertChildren/>
              <input type="hidden" value="#{cc.attrs.displayText}"/>
            </li>
          </ui:repeat>
        </ul>
      </ui:fragment>
    </h:panelGroup>
  </div>
</composite:implementation>
</html>
